<template id="header">
 
  <div> 
  <div style="height:100%;width:50%;float:left">
   <question :Describe=qution.describe>

    </question>
  </div>
  <div class="CodeBg">  
     <!-- <pre v-highlightjs=codeDate >
       <code class="java" style="height:100%">
          {{code}}
      </code>
   </pre> -->
   <el-select style="float:left" @change="updateLug" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <edit :code="code" @chanageCode="chanageCode" ></edit>
    <el-button type="primary" style="float:left" @click="Sumbjct">提交代码</el-button>
   <el-alert
    :title="Meg"
    :type="AlertType">
  </el-alert>
  </div>

  </div>
</template>
<script>
import question from './Quetion.vue'
import qs from 'qs'
import edit from './Edit.vue'
export default {
  components:{
    question,edit
  },
 
  data() {
    return {
      qution:[],
      type:{
          type:"java"
      },
      qid:"",
       options: [{
          value: 'Java',
          label: 'Java'
        }, {
          value: 'Python3',
          label: 'Python3'
        }],
        value: 'Java',
        CodeList:{},
        Meg:'',
        AlertType:'',
        code:'',
        textarea: ''
    }
  },
  beforeMount(){

  },
  mounted() {
     this.qid=this.$route.query.qid
     this.qution=this.$route.query
     this.$getRequest("/Topic/GetTopicBody?qid="+this.qution.qid).then(res=>{
       this.qution=res.data
       this.CodeList={"Java":res.data.javaCodetempter,"Python3":res.data.pyCodetempter}
       this.code=this.CodeList[this.value]
     })
},
  methods:{
    updateLug(){
     
    this.code=this.CodeList[this.value]
    
     
    },
    chanageCode(Code){
      console.log(Code)
      this.code=Code;
       
    },
    Sumbjct(){
      const loading = this.$loading({
          lock: true,
          text: '提交中请等待',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      this.$postRequest("/Judege",
      qs.parse({"qid":this.qid,"LuganType":this.value,"UserCode":this.code}),
            {"Content-Type":"application/json"})
            .then(da=>{
              if(da.data.Code!=10000){
                this.Meg=da.data.Meg
                this.AlertType="error"
                this.$message(da.data.JundgeResType);
             }else{
                this.Meg=da.data.Meg
                this.AlertType=""
                this.$message('恭喜你答对了这道题');
            }
      })
    
      loading.close()

    }
  },
}
</script>

<style type="text/css">

      .CodeBg{
          width:50%;
          height:550px;
          float:right;
          
      }
        body,html{
            margin: 0;
            padding: 0;
        }
        .header{
            background-color: rgb(64, 64, 14);
            height: 80px;
        }
        h1{
            margin: 0;
            padding: 0;
            font-size: 15px;
        }
        .container{
            margin: 0;
            padding: 0;
            display: flex;
            width: 100%;
            height: 200px;
        }
        .left{
            background-color: #2e6da4;
            flex: 2;
        }
        .main{
            background-color: #5cb85c;
            flex: 8;
        }
    </style>